
/*
 * 功能：弹出层，内嵌页面
 * 注：使用前需引用jQuery
 * 	  样式文件为/css/pageLayer.css
 * 
 * 参数：	obj:	title - 弹出层标题，默认为空
 * 				backgroundImage - 背景图片，默认为空
 * 				width - 弹出层的宽度，默认200px或弹出层实际宽度(不要低于200)，不写此属性则自适应宽度
 * 				height - 弹出层的高度，默认36px或弹出层实际高度，不写此属性则自适应高度
 * 				top - 弹出层顶部与浏览器最上方的距离，默认为30px(支持滚动条)
 * 				left - 弹出层左部与浏览器最左方的距离，
 * 						默认为[浏览器宽度/2-弹出层宽度/2](浏览器宽度大于弹出层宽度时)
 * 						或0(浏览器宽度小于弹出层宽度时)
 * 				innerDivId - 内嵌div的id,默认为空
 * 				innerHTML - 内嵌html代码，默认为空
 * 				zIndex - 弹出层的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，默认为1000
 * 						遮罩层的堆叠顺序为obj.zIndex-1
 * 
 * 返回值：无
 * 
 * 
 	例：
 	var obj = {
 		title:'我要报名',
 		backgroundImage:'pageLayer_bg03.gif',
 		width:600,
 		height:500,
 		top:30,
 		left:200,
 		innerDivId:'innerLayerDiv',	//div的id
 		innerHTML:'<iframe name="editFrame" frameborder="0" width="100%" height="100%" ' + 
			'src="" scrolling="auto"></iframe>',
 		zIndex:600
 	};
 	createPageLayer(obj);
 
 */

var old_innerDiv;		//当通过obj.innerDivId复制div时，存放原div的全局变量
var old_innerDiv_parent;	//当通过obj.innerDivId复制div时，存放原div上级元素的全局变量

//显示层
function createPageLayer(obj){
	if(obj == null || obj == undefined){	//容错
		obj = {};
	}
	if(obj.title == null || obj.title == undefined){	//title默认为空
		obj.title = "";
	}else if(obj.title.length > 34){
		obj.title = obj.title.substring(0,34);
	}
	if(obj.backgroundImage == null || obj.backgroundImage == undefined){	//backgroundImage默认为空
		obj.backgroundImage = "";
	}
	if(obj.width == null || obj.width == undefined){	//width默认为500px
		obj.width = 200;
	}
	if(obj.height == null || obj.height == undefined){	//height默认为400px
		obj.height = 36;
	}
	if(obj.top == null || obj.top == undefined){		//top默认为浏览器滚动高度+30px
		obj.top = document.body.scrollTop + document.documentElement.scrollTop + 30;
	}else{
		obj.top = document.body.scrollTop + document.documentElement.scrollTop + obj.top;
	}
	if(obj.left == null || obj.left == undefined){
		if(document.documentElement.clientWidth > obj.width){
			//浏览器宽度大于弹出层宽度时，left默认为[浏览器宽度/2-弹出层宽度/2]
			obj.left = Math.round(document.documentElement.clientWidth/2 - obj.width/2);
		}else{
			//浏览器宽度小于弹出层宽度时，left默认为0
			obj.left = 0;
		}
	}
	if(obj.innerDivId == null || obj.innerDivId == undefined){
		obj.innerDivId = "";
	}
	if(obj.innerHTML == null || obj.innerHTML == undefined){
		obj.innerHTML = "";
	}
	if(obj.zIndex == null || obj.zIndex == undefined){
		obj.zIndex = 1000;
	}
	
	//title宽度
	var titleLeft = 70;		//左
	var titleRight = 70;	//右
	var titleCenter = obj.width-titleLeft-titleRight;	//中
	
	
	//弹出层
	var pageLayer = '<div id="pageLayer" class="jobLayer" ' + 
	'style=" top: ' + obj.top + 'px; left: ' + obj.left + 'px; ' + 
	'border-top: 0px; border-right: 0px; border-bottom: 0px; position: absolute; ' + 
	'border-left: 0px; z-index: ' + obj.zIndex + '; display: none; visibility: visible; ' + 
	'background-color: #ffffff";>' + 
	'<table border=0 cellpadding=0 cellspacing=0 class="pageLayertable01" ' + 
	'style="width: ' + obj.width + 'px; height: ' + obj.height + 'px; font-size: 12px">' + 
	'<tbody>' + 
	'<tr id="pageLayertable02tr" class="pageLayertable02" style="cursor: move;">' + 
	'<td id="pageLayertd01td" class="pageLayertable05" height="36" style="width:' + titleLeft + 'px;"></td>' + 
	'<td id="pageLayertd02td" height="36" style="width:' + titleCenter + 'px;" align="center" class="pageLayerfont01" >' + obj.title + '</td>' + 
	'<td height="36" class="pageLayertable03"  style="width:' + titleRight + 'px;"><span>' + 
	'<span style="cursor: pointer" onclick="closePageLayer()" >[关闭]</span><span>&nbsp;&nbsp;</span>' + 
	'</span></td>' + 
	'</tr>' + 
	'<tr><td id="innerHTMLtd" ' + 
	'colspan="3" ' + 
	'class="pageLayertable04" style="height:100%;background-image:url(' + obj.backgroundImage + ')">' + 
	obj.innerHTML + 
	'</td></tr>' + 
	'<tr class="bottomLine">' + 
	'<td colspan="3">' + 
	'</td>' + 
	'</tr>' + 
	'</tbody>' + 
	'</table>' + 
	'</div>';
	
	$("body").append(pageLayer);
	
	//将以obj.innerDivId为id的div复制后放入层中，将原div保存后删除
	if(obj.innerDivId != ""){
		var innerDiv = $("#"+obj.innerDivId).clone(true);
		$(innerDiv).css("display","block");
		$(innerDiv).css("visibility","visible");
		$("#innerHTMLtd").append(innerDiv);

		old_innerDiv = $("#"+obj.innerDivId).clone(true);
		old_innerDiv_parent = $("#"+obj.innerDivId).parent();
		$("#"+obj.innerDivId).remove();
	}

	//显示层
	$("#pageLayer").css("display","block");
	//获取层的实际宽高
	obj.width = document.getElementById('pageLayer').clientWidth;
	obj.height = document.getElementById('pageLayer').clientHeight;
	//重新计算titleCenter
	titleCenter = obj.width-titleLeft-titleRight;	//中
	$("#pageLayertd02td").css("width",titleCenter + "px");
	//重新计算obj.left
	if(document.documentElement.clientWidth > obj.width){
		//浏览器宽度大于弹出层宽度时，left默认为[浏览器宽度/2-弹出层宽度/2]
		obj.left = Math.round(document.documentElement.clientWidth/2 - obj.width/2);
	}else{
		//浏览器宽度小于弹出层宽度时，left默认为0
		obj.left = 0;
	}
	$("#pageLayer").css("left",obj.left + "px");
	
	//遮罩层
	var maskHeight = $(document).height();
	var maskWidth = $(document).width();
	var maskLayer = '<div id="pageLayerMaskLayer" style="width:' + maskWidth + 'px;' + 
		'height:' + maskHeight + 'px;' + 
		'filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;' + 
		'position:absolute;background-color:rgb(228,228,228);top:0;left:0;' + 
		'z-index:' + (obj.zIndex-1) + '; display: block; visibility: visible; "></div>';
	$("body").append(maskLayer);
	
	//拖动功能
	var _move = false; //移动标记
	var _x, _y; //鼠标离控件左上角的相对位置
	$("#pageLayertable02tr").mousedown(function(e) {
		_move = true;
		_x = e.pageX - parseInt($("#pageLayer").css("left"));
		_y = e.pageY - parseInt($("#pageLayer").css("top"));
		//$("#pageLayer").fadeTo(20, 0.5); //点击后开始拖动并透明显示
		
		e.preventDefault();    //(拖动时阻止区域文字被选中)for chrome firefox ie9 || less than ie9
    });
	
	$(document).mousemove(function(e) {
		if (_move) {
			e.preventDefault();    //(拖动时阻止区域文字被选中)for chrome firefox ie9 || less than ie9
			
			var x = e.pageX - _x;  //移动时根据鼠标位置计算控件左上角的绝对位置
			var y = e.pageY - _y;
			$("#pageLayer").css({ top: y, left: x }); //控件新位置
		}
	}).mouseup(function() {
		_move = false;
		//$("#pageLayer").fadeTo("fast", 1); //松开鼠标后停止移动并恢复成不透明
	});
}

//关闭层
function closePageLayer(){
	$('#pageLayer').remove();
	$('#pageLayerMaskLayer').remove();
	//还原div
	$(old_innerDiv_parent).append(old_innerDiv);
	old_innerDiv_parent = null;
	old_innerDiv = null;
}

/*
 * 功能：弹出层，提示信息
 * 注：使用前需引用jQuery
 * 
 * 参数：	obj:	id - 弹出层id,默认为tipLayer
 * 				title - 弹出层标题，默认为空
 * 				text - 提示信息内容，默认为空
 * 				vanishTime - 弹出层存在时间，单位毫秒，默认3000
 * 				zIndex - 弹出层的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，默认为1010
 * 
 * 返回值：无
 * 
 * 
 	例：
 	var obj = {
 		id:'myTipLayer',
 		title:'提示',
 		text:'保存成功',
 		vanishTime:5000,
 		zIndex:1200
 	}
 	createTipLayer(obj);
 
 */
//弹出提示层
function createTipLayer(obj){
	if(obj == null || obj == undefined){	//容错
		obj = {};
	}
	if(obj.id == null || obj.id == undefined){
		obj.id = "tipLayer";
	}
	if(obj.title == null || obj.title == undefined){
		obj.title = "";
	}
	if(obj.text == null || obj.text == undefined){
		obj.text = "";
	}
	if(obj.vanishTime == null || obj.vanishTime == undefined){
		obj.vanishTime = 3000;
	}
	if(obj.zIndex == null || obj.zIndex == undefined){
		obj.zIndex = 1010;
	}
	if(document.getElementById(obj.id)){		//如果该提示层已存在，不会重复出现提示层
		return ;
	}
	
	var tipLayer = '<div id="' + obj.id + '" class="msg-div22"' + 
		'style="margin: 0px auto; left: -10000px; top: -10000px; width: 300px; position: absolute; z-index: 20000;">' + 
		'<div style="left: auto; top: auto; visibility: visible; position: static; z-index: auto;">' + 
			'<div class="msg" >' + 
				'<div class="x-box-tl">' + 
					'<div class="x-box-tr">' + 
						'<div class="x-box-tc"></div>' + 
					'</div>' + 
				'</div>' + 
				'<div class="x-box-ml">' + 
					'<div class="x-box-mr">' + 
						'<div class="x-box-mc">' + 
							obj.title + 
							'<div style="text-align:center">' + obj.text + '</div>' + 
						'</div>' + 
					'</div>' + 
				'</div>' + 
				'<div class="x-box-bl">' + 
					'<div class="x-box-br">' + 
						'<div class="x-box-bc"></div>' + 
					'</div>' + 
				'</div>' + 
			'</div>' + 
		'</div>' + 
	'</div>';
	
	$("body").append(tipLayer);
	
	//定位提示层初始的top和left
	var sTop = $(window).scrollTop();
	var sLeft= $(window).scrollLeft();
	var layerWidth = document.getElementById(obj.id).clientWidth;
	var layerHeight = document.getElementById(obj.id).clientHeight;
	var layerLeft = sLeft + Math.round(document.documentElement.clientWidth/2 - layerWidth/2);
	var layerTop = sTop + 0 - layerHeight;
	
	$("#" + obj.id).css({ top: layerTop, left: layerLeft }); //控件新位置
	
	//定位提示层显示后的top和left
	layerTop = layerTop + layerHeight;
	$("#" + obj.id).animate({top:layerTop + 'px'});
	
	//obj.vanishTime毫秒后隐藏
	setTimeout(function(){
		$(window).unbind("scroll.tipLayer" + obj.id);
		layerTop = 0 - layerHeight;
		$("#" + obj.id).animate({top:layerTop + 'px'});
	},obj.vanishTime);

	//obj.vanishTime+2000毫秒后销毁
	setTimeout(function(){
		$('#' + obj.id).remove();
	},(obj.vanishTime+1000));
	
	$(window).bind("scroll.tipLayer" + obj.id,function() {
		var sTop = $(window).scrollTop();
		var sLeft= $(window).scrollLeft();
		layerTop = sTop;
		layerLeft = sLeft + Math.round(document.documentElement.clientWidth/2 - layerWidth/2);
		$("#" + obj.id).css({top:layerTop + "px", left:layerLeft + "px"});
	});
}